<template>
  <div>
    <page-title v-if="!isEdit" title="首页/发起评审" home-path="/sale/home"></page-title>
    <div class="pageMain">
      <div class="pageMain-title">
        <span>录入合同评审信息</span>
      </div>
      <div class="pageMain-body">
        <el-form
          ref="formMatter"
          :model="formMatter"
          :rules="rules"
          label-position="left"
          inline
          label-width="100px"
        >
          <el-row style="margin-top: 20px">
            <el-col :span="2" :offset="4" style="margin-top: 5px">
              <span class="title">1.顾客信息</span>
            </el-col>
            <el-col :span="6">
              <el-form-item label="顾客名称" prop="customerName">
                <el-select
                  v-model="formMatter.customerName"
                  filterable
                  placeholder="请输入顾客名称"
                  allow-create
                  clearable
                  @change="handleSelect"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.key"
                    :label="item.value"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="2">
              <el-form-item label="联系方式:" prop="customerPhone">
                <el-input v-model="formMatter.customerPhone" placeholder="请输入联系方式"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="2" :offset="4" style="margin-top: 5px">
              <span class="title">2.种类规格数量</span>
            </el-col>
            <el-col :span="6">
              <el-form-item label="钢类:" prop="steelTypeName">
                <el-select
                  v-model="formMatter.steelTypeName"
                  filterable
                  placeholder="请输入钢类"
                  allow-create
                  clearable
                  default-first-option
                >
                  <el-option
                    v-for="item in steelTypes"
                    :key="item.id"
                    :label="item.value"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8" :offset="2">
              <el-form-item label="钢种:" prop="steelGradeName">
                <el-select
                  v-model="formMatter.steelGradeName"
                  filterable
                  placeholder="请输入钢种"
                  allow-create
                  clearable
                  default-first-option
                >
                  <el-option
                    v-for="item in steelGradeList"
                    :key="item.id"
                    :label="item.value"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="9" :offset="5" style="display: flex;">
              <el-form-item
                label="规格:"
                prop="specification"
                style="margin-left: 3.7vw"
              >
                <el-select
                  v-model="formMatter.specification"
                  filterable
                  allow-create
                  default-first-option
                  size="mini"
                  placeholder="请选择规格"
                  clearable
                  style="width: 120px"
                  @change="handleSpecChange"
                >
                  <el-option
                    v-for="item in specificationBaseList"
                    :key="item.id"
                    :value="item.specification"
                    :label="item.specification"
                  />
                </el-select>
              </el-form-item>
              <div v-for="(item, index) in specInputs" v-show="specInput==true" :key="index" >
                  <span style="width: 20px; font-size: 16px">{{ item }}</span>
                <el-input
                  v-model="specTest[index]"
                  size="mini"
                  style="width: 70px"
                ></el-input>
                </div>
            </el-col>
            <el-col :span="6" :offset="0.5">
              <el-form-item label="数量:" prop="steelNumber">
                <el-input
                  v-model="formMatter.steelNumber"
                  size="medium"
                  style="width: 130px"
                ></el-input>
                <el-select
                  v-model="formMatter.steelNumberUnit"
                  filterable
                  size="mini"
                  clearable
                  style="width: 80px"
                  placeholder="单位"
                >
                  <el-option label="吨" value="吨" />
                  <el-option label="捆" value="捆" />
                  <el-option label="支" value="支" />
                  <el-option label="锭" value="锭" />
                  <el-option label="Kg" value="Kg" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="2" :offset="4" style="margin-top: 5px">
              <span class="title">3.技术生产要求</span>
            </el-col>
            <el-col :span="6">
              <el-form-item label="交货状态" prop="deliveryStatus">
                <el-select
                  v-model="formMatter.deliveryStatus"
                  placeholder="请输入交货状态"
                  filterable
                  allow-create
                  default-first-option
                  size="mini"
                  clearable
                  style="width: 210px"
                >
                  <el-option
                    v-for="item in deliveryStatusList"
                    :key="item.id"
                    :value="item.deliveryStatus"
                    :label="item.deliveryStatus"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="2">
              <el-form-item label="加工用途" prop="processingPurpose">
                <el-select
                  v-model="formMatter.processingPurpose"
                  filterable
                   placeholder="请输入加工用途"
                  allow-create
                  default-first-option
                  size="mini"
                  clearable
                  style="width: 210px"
                >
                  <el-option
                    v-for="item in processingPurposeList"
                    :key="item.id"
                    :value="item.processingPurpose"
                    :label="item.processingPurpose"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="17" :offset="6">
              <el-form-item>
                <span style="font-size: 16px">冶炼方法: {{ dropContent }}</span>
                <el-button
                  type="warning"
                  size="mini"
                  @click="resetSmeltingMethods"
                  >重置</el-button
                >
                <div style="display: flex;margin-top: 30px">
                  <div style="font-size: 16px; width: 400px" >
                    <div style="display: flex">
                      电炉厂：
                      <div
                        v-for="(item, index) in electricFurnace"
                        :key="index"
                        style="margin-right: 10px"
                        class="electricFurnace"
                        draggable="true"
                        @dragstart="onDragStart(item, index, $event)"
                      >
                        {{ item }}
                      </div>
                    </div>
                    <div style="margin-top: 20px">
                      特冶厂：
                      <div
                        v-for="(item, index) in teye"
                        :key="index"
                        style="margin-right: 10px"
                        class="electricFurnace"
                        draggable="true"
                        @dragstart="onDragStart(item, index, $event)"
                      >
                        {{ item }}
                      </div>
                    </div>
                    <div style="margin-top: 20px">
                      铸造厂：
                      <div
                        v-for="(item, index) in forging"
                        :key="index"
                        style="margin-right: 10px"
                        class="electricFurnace"
                        draggable="true"
                        @dragstart="onDragStart(item, index, $event)"
                      >
                        {{ item }}
                      </div>
                    </div>
                    <div style="margin-top: 20px">
                      <el-checkbox v-model="formMatter.recommendRoute" :true-label="1" :false-label="0">由技术评审人员推荐</el-checkbox>
                    </div>
                  </div>
                  <div
                    class="right"
                    @dragover.prevent="onDragOver"
                    @drop="onDrop"
                  >
                    {{ dropContent || "从左侧选择冶炼方法拖拽至此框内" }}
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="6" :offset="6">
              <el-form-item label="技术条件:" prop="technicalStandardName">
                <el-select
                  v-model="formMatter.technicalStandardName"
                  placeholder="请输入技术条件"
                  filterable
                  allow-create
                  default-first-option
                  size="mini"
                  clearable
                  style="width: 210px"
                >
                  <el-option
                    v-for="item in conditiOptions"
                    :key="item.id"
                    :value="item.technicalStandardName"
                    :label="item.technicalStandardName"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="2">
              <el-form-item label="标准:" prop="standardName">
                <!-- <el-autocomplete
                  v-model="formMatter.standardName"
                  :fetch-suggestions="getStandardList"
                  placeholder="请输入标准"
                  clearable
                  style="width: 210px"
                /> -->
                <el-select
                  v-model="formMatter.standardName"
                  placeholder="请输入标准"
                  filterable
                  allow-create
                  default-first-option
                  size="mini"
                  clearable
                  style="width: 210px"
                >
                  <el-option
                    v-for="item in standardList"
                    :key="item.id"
                    :value="item.value"
                    :label="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="2" :offset="4" style="margin-top: 5px">
              <span class="title">4.特殊要求</span>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="specialRequirements">
                <el-input
                  v-model="formMatter.specialRequirements"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  placeholder="(不超过5000字)"
                  type="textarea"
                  size="medium"
                  style="width: 900px"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div style="display: flex; margin-left: 22.5vw; margin-top: 10px">
            <span>附件：</span
            ><!-- :data="{ contractId: uploadData.contractId }" -->
            <el-upload
              ref="upload"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :on-error="handleError"
              :on-change="handleChange"
              :before-upload="beforeUpload"
              :file-list="fileList"
              :auto-upload="false"
              multiple
              action="/file/upload"
              accept=".doc, .docx, .xls, .xlsx, .pdf"
            >
              <el-button slot="trigger" size="small" type="warning"
                >上传文件</el-button
              >
              <div slot="tip" class="el-upload__tip">
                只支持上传 Word、Excel、PDF 文件；同时只支持上传一个文件；
              </div>
            </el-upload>
          </div>
          <el-row style="margin-top: 20px">
            <el-col :span="2" :offset="4" style="margin-top: 5px">
              <span class="title">5.评审要求</span>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="进行成本测算:"
                prop="isCostCalculation"
                label-width="150px"
              >
                <el-radio-group v-model="formMatter.isCostCalculation">
                  <el-radio :label="false">否</el-radio>
                  <el-radio :label="true">是</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="6" :offset="6">
              <el-form-item
                label="评审能否生产:"
                prop="isProduce"
                label-width="150px"
              >
                <el-radio-group v-model="formMatter.isProduce">
                  <el-radio :label="false">否</el-radio>
                  <el-radio :label="true">是</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="6" :offset="6">
              <el-form-item
                label="评审外委厂商:"
                prop="isOutsourcingFirm"
                label-width="150px"
              >
                <el-radio-group v-model="formMatter.isOutsourcingFirm">
                  <el-radio :label="false">否</el-radio>
                  <el-radio :label="true">是</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <div v-if="formMatter.isOutsourcingFirm">
            <Waiwei ref="waiWeiRef" :form-info="formMatter"></Waiwei>
          </div>
          <el-row style="margin-top: 20px">
            <el-col :span="2" :offset="4" style="margin-top: 5px">
              <span class="title">6.补充信息</span>
            </el-col>
            <el-col :span="10">
              <el-form-item label="备注:" label-width="50px" prop="remark">
                <el-input v-model="formMatter.remark" placeholder="请输入备注" ></el-input>
                <!-- <el-select
                  v-model="formMatter.remark"
                  placeholder="请输入备注"
                  filterable
                  allow-create
                  default-first-option
                  size="mini"
                  clearable
                  style="width: 210px"
                >
                  <el-option
                    v-for="item in remakeOptions"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </el-select> -->
              </el-form-item>
              <el-form-item
                label="负责业务员:"
                label-width="100px"
                style="margin-left: 20px"
                prop="salesmanName"
              >
                <el-input
                  v-model="formMatter.salesmanName"
                  size="medium"
                  placeholder="请输入负责业务员"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div style="margin-left: 60%">
            <el-button size="mini" type="danger" @click="handleCancel"
              >取消</el-button
            >
            <el-button size="mini" type="primary" @click="saveReview"
              >保存</el-button
            >
            <el-button size="mini" type="success" @click="submitReview"
              >提交</el-button
            >
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import PageTitle from "@/components/PageTitle";
import Waiwei from "@/components/Waiwei.vue";
import {
  GET_TECHSTANDARDLIST,
  SAVE_REVIEW,
  SUBMIT_REVIEW,
  GET_DELIVERYSTATUSLIST,
  GET_PROCESSINGPURPOSELIST,
  GET_STANDARDLIST,
  GET_CUSTOMERNAMELIST,
  GET_STEELGRADELIST,
  GET_SPECIFICATIONBASELIST,
  GET_STEELTYPELIST,
  GET_LOGIN_USER,
  GET_OUT_SOURCING
} from "@/lib/Api.js";
import { post, get } from "@/lib/Util.js";
export default {
  components: {
    PageTitle,
    Waiwei
  },
  data() {
    return {
      isEdit: false,
      specInput: false,
      formMatter: {
        code: "",
        customerName: "",
        customerPhone: "",
        deliveryStatus: "",
        height: null,
        norm: [],
        isCostCalculation: true,
        isOutsourcingFirm: false,
        isProduce: true,
        length: null,
        processingPurpose: "",
        remark: "",
        salesmanName: "",
        smeltingProcess: [],
        specialRequirements: "",
        specification: "",
        standardName: "",
        steelGradeName: "",
        steelNumber: 1,
        steelNumberUnit: "",
        steelTypeName: "",
        technicalStandardName: "",
        width: null,
        innerRadius: null,
        outerRadius: null,
        prefix: "",
        recommendRoute: ""
      },
      fileList: [],
      options: [],
      conditiOptions: [],
      remakeOptions: [],
      rules: {
        customerName: [
          { required: true, message: "请输入顾客名称", trigger: "change" }
        ],
        customerPhone: [
          { required: true, message: "请输入顾客联系方式", trigger: "blur" }
        ],
        steelTypeName: [
          { required: true, message: "请选择钢类", trigger: "change" }
        ],
        steelGradeName: [
          { required: true, message: "请选择钢种", trigger: "change" }
        ],
        specification: [
          { required: true, message: "请选择规格", trigger: "change" }
        ],
        height: [{ required: true, message: "请输入长宽高", trigger: "blur" }],
        width: [{ required: true, message: "请输入长宽高", trigger: "blur" }],
        length: [{ required: true, message: "请输入长宽高", trigger: "blur" }],
        steelNumber: [
          { required: true, message: "请输入数量", trigger: "blur" }
        ],
        steelNumberUnit: [
          { required: true, message: "请选择单位", trigger: "change" }
        ],
        deliveryStatus: [
          { required: true, message: "请选择交货状态", trigger: "blur" }
        ],
        processingPurpose: [
          { required: true, message: "请选择加工用途", trigger: "blur" }
        ],
        isCostCalculation: [
          {
            required: true,
            message: "请选择是否进行成本测算",
            trigger: "change"
          }
        ]
      },
      customers: [],
      draggedItemIndex: null, // 存储当前被拖拽项目的索引
      dropContent: null, // 放置到目标区域的内容
      steelTypes: [],
      stellGrateList: [],
      steelGradeList: [],
      targetArr: [],
      specInputs: [],
      specTest: [],
      electricFurnace: ["电炉", "中频炉", "LF", "AOD", "VOD"],
      teye: ["真空感应炉", "电源重熔", "真空真耗"],
      forging: ["连铸", "模铸"],
      deliveryStatusList: [],
      processingPurposeList: [],
      standardList: [],
      specificationBaseList: [],
      specifications: [
        { label: "热板", value: "hot_plate" },
        { label: "钢管", value: "steel_pipe" }
      ],
      uploadData: {
        contractId: ""
      }
    };
  },
  watch: {
    // 外委厂商如果勾选，则显示外面弹窗，如果不勾选，则清空对应内容
    "formMatter.isOutsourcingFirm": {
      handler(newVal) {
        if (!newVal) {
        }
      }
    }
  },
  mounted() {
    this.getsteelTypeNames();
    this.getCustomerNames();
    this.getSteelGradeNames();
    this.getTechStandardList(); // 技术条件
    this.getDeliveryStatusList();
    this.getProcessingPurposeList();
    /* this.getSteelGradeName(); */
    this.getStandardList();
    this.getSpecificationBaseList();
    /* this.getSteelTypeName(); */
    this.getDefaultUser(); // 获取默认登陆人
  },
  methods: {
    // 获取默认登陆人
    getDefaultUser() {
      post(GET_LOGIN_USER).then(res => {
        this.formMatter.salesmanName = res.data.name;
      });
    },
    SetData(orderInfo) {
      this.isEdit = true;
      this.formMatter = orderInfo;
      const electricFurnace = [];
      const teye = [];
      const forging = [];
      if (this.formMatter.smeltingProcess) {
        this.dropContent = this.formMatter.smeltingProcess.join("+");
        for (var index in this.electricFurnace) {
          if (
            !this.formMatter.smeltingProcess.includes(
              this.electricFurnace[index]
            )
          ) {
            electricFurnace.push(this.electricFurnace[index]);
          }
        }
        for (index in this.teye) {
          if (!this.formMatter.smeltingProcess.includes(this.teye[index])) {
            teye.push(this.teye[index]);
          }
        }
        for (index in this.forging) {
          if (!this.formMatter.smeltingProcess.includes(this.forging[index])) {
            forging.push(this.forging[index]);
          }
        }
      } else {
        this.dropContent = null;
      }

      this.electricFurnace = electricFurnace;
      this.teye = teye;
      this.forging = forging;
    },
    handleSpecChange(value) {
      this.specInput = true;
      this.specInputs = this.specificationBaseList.find(
        item => item.specification == value
      ).button;
    },
    resetFields() {
      this.formMatter.height = "";
      this.formMatter.width = "";
      this.formMatter.length = "";
      this.formMatter.innerRadius = "";
      this.formMatter.outerRadius = "";
    },
    // 获取对应手机号
    getPhoneByName(name) {
      const entry = this.options.find(item => item.value === name);
      return entry ? entry.phone : ""; // 如果找到则返回电话，否则返回空字符串
    },
    getCustomerNames(queryString) {
      const requestData = {
        customerName: queryString || ""
      };
      post(GET_CUSTOMERNAMELIST, requestData).then(resp => {
        const customers = resp.data || [];
        this.options = customers.map(customer => ({
          key: customer.id,
          value: customer.customerName,
          phone: customer.customerPhone
        }));
      });
    },
    // 选中老客户后，填充顾客信息
    handleSelect(item) {
      this.formMatter.customerPhone = this.getPhoneByName(item);
    },
    //获得钢种
    getSteelGradeNames() {
      const requestData = {
        steelGradeName: ""
      };

      post(GET_STEELGRADELIST, requestData).then(resp => {
        // this.steelGradeList = resp.data || [];
        this.steelGradeList = resp.data.map(steelGrade => ({
          value: steelGrade.steelGradeName,
          id: steelGrade.id
        }));

        // // 调用回调，传递筛选结果
        // cb(results);
      });
    },
    //获得钢类
    getsteelTypeNames(queryString) {
      const requestData = {
        steelTypeName: queryString || ""
      };
      post(GET_STEELTYPELIST, requestData).then(resp => {
        this.steelTypes = resp.data.map(steelType => ({
          value: steelType.steelTypeName,
          id: steelType.id
        }));
      });
    },
    //获得技术条件列表
    getTechStandardList() {
      get(GET_TECHSTANDARDLIST).then(res => {
        if (res.data && res.data.length) {
          this.conditiOptions = res.data;
        }
      });
    },
    //获得交货状态
    getDeliveryStatusList() {
      const requestData = {
        id: ""
      };
      post(GET_DELIVERYSTATUSLIST, requestData).then(resp => {
        this.deliveryStatusList = resp.data;
      });
    },
    //获得加工用途
    getProcessingPurposeList() {
      const requestData = {
        id: ""
      };
      post(GET_PROCESSINGPURPOSELIST, requestData).then(resp => {
        this.processingPurposeList = resp.data;
      });
    },
    //获得标准
    getStandardList() {
      get(GET_STANDARDLIST).then(resp => {
        // this.standardList = resp.data || [];
        this.standardList = resp.data.map(standard => ({
          value: standard.standardName,
          id: standard.id
        }));
      });
    },
    //获得规格
    getSpecificationBaseList() {
      let data = {
        specification: ""
      };
      post(GET_SPECIFICATIONBASELIST, data).then(resp => {
        this.specificationBaseList = resp.data;
      });
    },
    // 文件上传前的校验
    beforeUpload(file) {
      const allowedTypes = [
        "application/msword", // .doc
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document", // .docx
        "application/vnd.ms-excel", // .xls
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", // .xlsx
        "application/pdf" // .pdf
      ];
      const isAllowed = allowedTypes.includes(file.type);

      if (!isAllowed) {
        this.$message.error("只能上传 Word、Excel 或 PDF 文件");
      }
      return isAllowed; // 返回 true 允许上传
    },
    handleRemove(file, fileList) {
      const index = fileList.indexOf(file);
      if (index !== -1) {
        this.fileList.splice(index, 1);
        this.$message.success("文件移除成功");
      }
    },
    // 上传成功的处理函数
    handleSuccess(response, file, fileList) {
      this.$message.success(`${file.name} 上传成功`);
      this.fileList = fileList;
    },
    handleChange(file, fileList) {
      this.fileList = fileList; // 更新文件列表状态
    },
    // 上传失败的处理函数
    handleError(err, file) {
      this.$message.error(`${file.name} 上传失败`);
    },
    // 重置表单
    handleCancel() {
      this.$refs.formMatter.resetFields();
      this.resetSmeltingMethods();
      this.formMatter.steelNumberUnit = "";
      this.resetFields();
      this.fileList = [];
    },
    //保存
    saveReview() {
      let waiInfo = {
        outsourcingName: "",
        outsourcingPhone: "",
        outsourcingPrice: "",
        outsourcingId: "", // 外资厂商id
        contractInfoId: "" // 待评审订单id
      };
      if (this.formMatter.isOutsourcingFirm) {
        waiInfo = this.$refs.waiWeiRef.getData();
      }
      this.formMatter = Object.assign(this.formMatter, waiInfo);

      let queryForm = Object.assign(this.formMatter, {
        norm: this.specTest
      });
      post(SAVE_REVIEW, queryForm)
        .then(resp => {
          if (resp.code === 200) {
            this.$message.success("保存成功");
            const id = resp.data;
            const formData = new FormData();
            this.fileList.forEach(file => {
              formData.append("file", file.raw); //文件
            });
            formData.append("contractId", id);
            post("/api/file/upload", formData).then(res => {
              console.log("ceshi", res);
            });
            // fetch("/api/file/upload", { method: "POST", body: formData }).then(
            //   response => response.json()
            // );
            if (this.isEdit) {
              this.$emit("close", this.formMatter.id);
            }
          } else {
            this.$message.error(resp.message);
          }
          this.$router.push({ path: "/sale/home" });
        })
        .catch(e => {
          console.log(e);
        });
    },
    //提交
    submitReview() {
      let waiInfo = {
        outsourcingName: "",
        outsourcingPhone: "",
        outsourcingPrice: "",
        outsourcingId: "", // 外资厂商id
        contractInfoId: "" // 待评审订单id
      };
      if (this.formMatter.isOutsourcingFirm) {
        waiInfo = this.$refs.waiWeiRef.getData();
      }
      this.formMatter = Object.assign(this.formMatter, waiInfo);
      let queryForm = Object.assign(this.formMatter, {
        norm: this.specTest
      });
      post(SUBMIT_REVIEW, queryForm)
        .then(resp => {
          if (resp.code === 200) {
            this.$message.success("提交成功");
            const id = resp.data;
            const formData = new FormData();
            this.fileList.forEach(file => {
              formData.append("file", file.raw); //文件
            });
            formData.append("contractId", id);
            // fetch("/api/file/upload", { method: "POST", body: formData }).then(
            //   response => response.json()
            // );
            post("/file/upload", formData).then(res => {
              console.log("ceshi", res);
            });
          } else {
            this.$message.error(resp.message);
          }
          this.$router.push({ path: "/sale/home" });
        })
        .catch(e => {
          console.log(e);
        });
    },
    /** 拖拽冶炼方法  */
    // 重置冶炼方法
    resetSmeltingMethods() {
      this.formMatter.smeltingProcess = [];
      // 清空已拖拽的内容
      this.dropContent = null;
      // 重置所有冶炼方法到初始状态
      this.electricFurnace = ["电炉", "中频炉", "LF", "AOD", "VOD"];
      this.teye = ["真空感应炉", "电源重熔", "真空真耗"];
      this.forging = ["连铸", "模铸"];
    },
    // 拖拽开始事件
    onDragStart(item, index, event) {
      this.draggedItemIndex = index; // 记录当前拖拽的项目索引
      event.dataTransfer.setData("text/plain", item); // 存储拖动的数据
      if (this.electricFurnace.includes(item)) {
        this.targetArr = this.electricFurnace;
      } else if (this.teye.includes(item)) {
        this.targetArr = this.teye;
      } else {
        this.targetArr = this.forging;
      }
    },
    // 允许在目标区域上拖动
    onDragOver(event) {
      event.preventDefault();
    },
    // 拖拽释放到目标区域
    onDrop(event) {
      const item = event.dataTransfer.getData("text/plain"); // 获取拖动的数据

      // 如果 smeltingProcess 还没有初始化为数组，则初始化为空数组
      if (!Array.isArray(this.formMatter.smeltingProcess)) {
        this.formMatter.smeltingProcess = [];
      }
      this.dropContent = this.dropContent
        ? this.dropContent + "+ " + item
        : item; // 追加显示
      // 将拖动的项目追加到 smeltingProcess 数组
      this.formMatter.smeltingProcess.push(item);

      // 移除被拖拽的项目
      this.removeDraggedItem();
    },
    // 移除被拖拽的项目
    removeDraggedItem() {
      if (this.draggedItemIndex !== null) {
        this.targetArr.splice(this.draggedItemIndex, 1); // 从数组中移除拖拽项
        this.draggedItemIndex = null; // 清空索引
      }
    }
  }
};
</script>

<style scoped lang="scss">
/deep/ .el-form-item__label {
  font-size: 16px;
}

::v-deep .inner::-webkit-scrollbar {
  width: 0 !important;
}

.title {
  font-size: 18px;
  float: left;
}

.draggable {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  text-align: center;
  line-height: 100px;
  position: absolute;
  cursor: grab;
}

.droppable {
  width: 200px;
  height: 200px;
  background-color: lightgray;
  position: absolute;
  top: 150px;
  left: 150px;
}

.right {
  height: 13vh;
  width: 20vw;
  margin-left: 5vw;
  background-color: #405790;
}

.electricFurnace {
  cursor: pointer;
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  color: #409eff;
  line-height: 30px;
  border: #409eff 1px solid;
  display: inline-block;
  /* 重要，确保拖拽元素是 inline-block 类型 */
}
</style>
